
<template>
  <div class="dx-detail-container">
    <!-- <div class="dx-header-container">
      <div>
        <i class="dx-layer" /><span>{{ proData.zhName }}</span>
      </div>
      <div><i class="el-icon-close" @click="closeContainer" /></div>
    </div> -->
    <div style="height: 50px; width: 100%; margin-top: 15px">
      <el-input
        placeholder="根据名称检索"
        v-model="input3"
        @input="inputChange"
        class="input-with-select"
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="inputChange"
        ></el-button>
      </el-input>
    </div>
    <div class="dx-body-container">
      <div
        v-for="(item, index) in tableList"
        :key="item.id"
        class="list-container"
      >
        <label>{{ index + 1 }} </label>
        <span class="data-name">{{ item.name }}</span>
        <span class="data-creareTime">{{ item.creareTime }}</span>
        <span class="data-unit">{{ item.unit }}</span>
        <div>
          <router-link
            tag="i"
            :to="{
              path: `/monitoring/theMonitoring/monitoringDetail/${proData.usName}/${item.id}`,
            }"
            class="el-icon-view"
          />
          <router-link
            tag="i"
            :to="{
              path: `/monitoring/theMonitoring/monitoringForm/${proData.usName}/${item.id}`,
            }"
            class="el-icon-edit"
          />

          <i class="dx-dingweiweizhi" @click="flyTo(item)" />
          <i class="el-icon-delete" @click="delTheData(item.id)" />

          <!-- <router-link
            tag="i"
            :to="{
              path: `/geological/theGeological/GeologicalForm/${proData.usName}/${item.id}`,
            }"
            class="el-icon-plus"
          />  -->
        </div>
      </div>
    </div>
    <!-- <div class="dx-footer-container" v-if="!input3">
      <Pagination
        :total="parameters.total"
        :page="parameters.page"
        :limit="parameters.limit"
        @pagination="changePagination"
      />
    </div> -->
  </div>
</template>

<script>
import DataOptions from "./dataOptions";
import Pagination from "@/components/Pagination/index.vue";

import DxCommonUtils from "@/utils/cesiumDxUtils/common3D";

export default {
  name: "DataDisplay",

  data() {
    return {
      proData: "",
      tableList: [],
      parameters: {
        page: 1,
        total: 60,
        limit: 20,
      },
      input3: "",
    };
  },
  components: {
    Pagination,
  },
  created() {
    const query = this.$route.query.type || null;
    this.proData = DataOptions.fieldlabel[query];
    this.menuType = this.proData.usName;
    // 设置页数
    this.parameters.total = this.proData["total"] || 0;
    // 初始化数据
    this.tableList = []; //  DataOptions[query].slice(0, this.parameters.limit);

    // const query = this.$route.params.type || null;
    // this.proData = DataOptions.fieldlabel[query];
    // // 设置页数
    // this.parameters.total = this.proData["total"] || 0;
    // // 初始化数据
    // this.tableList = DataOptions[query].slice(0, this.parameters.limit);
  },
  methods: {
    closeContainer() {
      this.$router.go(-1);
    },
    handleClick(row) {},
    delTheData() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 处理数据
    settableList() {
      const s = (this.parameters.page - 1) * this.parameters.limit + 0;
      const e =
        (this.parameters.page - 1) * this.parameters.limit +
        this.parameters.limit;
      this.tableList = DataOptions[this.proData.usName].slice(s, e);
    },
    // 输入框
    inputChange() {
      if (this.input3) {
        this.tableList = DataOptions[this.proData.usName].filter((item) =>
          item.name.includes(this.input3)
        );
      } else {
        this.settableList();
      }
    },
    // 切换分页
    changePagination(data) {
      this.parameters.page = data.page;
      this.settableList();
    },
    // 加载模型并飞入
    flyTo(data) {
      DxCommonUtils.cameraFlyTo({
        x: data.coordinates[0],
        y: data.coordinates[1],
        z: 12000,
      });
      DxCommonUtils.createModel(
        "http://106.12.254.129:39895/data/models3D/Cesium_Air.glb",
        {
          x: data.coordinates[0],
          y: data.coordinates[1],
          z: 200,
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.data-display {
  position: absolute;
  top: 160px;
  left: 2px;
  height: calc(100vh - 200px);
  width: 430px;
  z-index: 100000;
  // background-color: rgba(0, 0, 0, 0.618);
  // background-color: rgba(0, 48, 64, 0.8);
  background-color: #3f4854;
  box-sizing: border-box;
  // box-shadow: 0 0 2px #fff, 0 0 2px #fff inset;
  padding: 0 10px;
  overflow: hidden;
  box-sizing: border-box;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  border-radius: 6px;
  // border: 1px solid #73ffff !important;
}
.list-container {
  & > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .data-name {
    flex: 1;
  }
  .data-creareTime {
    width: 100px;
  }
  .data-unit {
    width: 200px;
  }
}

.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
